<template>
  <div>
    <!-- <div v-if="props.res"> -->
    <!-- <nut-swiper :height="px2rpx(res.data.height) + 'rpx'" :pagination-visible="true" auto-play="30000">
        <nut-swiper-item v-for="(item, index) in props.res.data.list" :key="item.id" @click="clickSwiper(index)">
          <img w-full :style="{ height: px2rpx(res.data.height) + 'rpx' }" :src="item.img" alt="" />
        </nut-swiper-item>
      </nut-swiper> -->
    <!-- </div> -->
    <swiper
      class="swiper"
      circular
      :indicator-dots="false"
      :autoplay="res.data.autoPlay != 0"
      :interval="res.data.autoPlay == undefined ? 5000 : res.data.autoPlay * 1000"
      :duration="500"
      :style="{ height: px2rpx(res.data.height) + 'rpx' }"
      next-margin="120rpx"
      pl-40rpx
      @change="changeSwiper">
      <swiper-item
        v-for="(item, index) in props.res.data.list"
        :key="item.id"
        @click="clickSwiper(index)"
        w-600rpx
        :style="{ height: px2rpx(res.data.height) + 'rpx' }">
        <image
          mode="aspectFill"
          w-full
          w-600rpx
          :style="{
            height: px2rpx(res.data.height) + 'rpx',
            'border-radius': px2rpx(res.data.round) + 'rpx'
          }"
          :src="item.img"
          class="image"
          :class="{ suoxiao: current != index }"></image>
      </swiper-item>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import { px2rpx } from './px2rpx'
import { modelNavigateTo } from './tpl-v3'
const props = defineProps(['res'])
const result = ref<Array<string>>([
  'https://picsum.photos/600/600?1',
  'https://picsum.photos/600/360?2',
  'https://picsum.photos/600/360?3',
  'https://picsum.photos/600/600?4'
])
const current = ref<number>(0)
function clickSwiper(index: number) {
  modelNavigateTo(props.res.data.list[index])
}
function changeSwiper(e: any) {
  current.value = e.detail.current
}
</script>

<style scoped>
.suoxiao {
  transform: scale(0.85);
}
.image {
  transition: transform 0.5s ease;
}
</style>
